﻿@{
    ViewBag.Title = "JqueryAjax";
}
<script  src=" @Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"  type="text/javascript"> </script>
<h2>JQuery y Unobtrusive AJAX</h2>

Unobtrusive AJAX
<hr />
<div align="center">
    @using ((Ajax.BeginForm("CalcEdad", "Home",
        new AjaxOptions()
        {
            HttpMethod = "Post",
            UpdateTargetId = "result"
        })))
    {
        <label> Fecha de nacimiento:</label>  
        <input type="text" name="fechaNacimiento" id="fechaNacimiento" /> 
        <input type="submit" value="Calcular Edad" /> 
    }
    <hr />
    <div id="result"></div>
</div>
<br />
<br />
JQuery
<hr />
<div align="center">    
     <script type="text/javascript">
         $(document).ready(function () {
             $("#btnCalc").click(function () {
                 $.ajax(
                {
                    url: '/Home/CalcEdad',
                    type: "POST",
                    data: { fechaNacimiento: document.getElementById("fechaNacimiento2").value },
                    success: function (data) {
                        $("#result2").html(data);
                    }
                });
             });
         });

</script>
<label>
    Fecha de nacimiento:</label>
<input type="text" name="fechaNacimiento2" id="fechaNacimiento2" />
<input type="submit" id="btnCalc" value="Calcular Edad" />
<hr />
<div id="result2">
</div>
</div>